<template>
  <div id="login">
    <div class="container">
      <el-form ref="form" :model="form" >
        <el-form-item class="title" style="margin-top:30px"> 欢迎进入后台管理系统 </el-form-item>
        <el-form-item prop="username">
          <el-input
            ref="username"
            v-model="form.username"
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            ref="password"
            v-model="form.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
          >
          </el-input>
        </el-form-item>

        <!-- <el-form-item prop="captcha">
          <el-input
            ref="captcha"
            v-model="form.captcha"
            placeholder="请输入验证码"
            prefix-icon="el-icon-aim"
            @keyup.enter="login"
          >
          </el-input>
          <el-image
            class="captcha"
            :src="captcha"
            fit="cover"
            @click="captchaChange"
          ></el-image>
        </el-form-item> -->

        <el-form-item class="t-r">
          <el-button type="success" @click="login" size="medium"
            >立即登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { request_login } from "@/util/api";
import { CONST_DMOMAIN_URL } from "@/config/env";

export default {
  name: "Login",
  data() {
    return {
      captcha: CONST_DMOMAIN_URL + "/captcha?random=" + Math.random(), // 验证码地址
      form: {
        username: "",
        password: "",
        captcha: "",
      },
    };
  },
  methods: {
    // 更换验证码
    captchaChange() {
      this.captcha = CONST_DMOMAIN_URL + "/captcha?random=" + Math.random();
    },
    // 登录
    login() {
      if (this.form.username == "") {
        this.$notify.info({
          title: "系统提示",
          message: "请输入管理员账号",
          offset: 70,
        });
        this.$refs["username"].focus();
        return false;
      }
      if (this.form.password == "") {
        this.$notify.info({
          title: "系统提示",
          message: "请输入管理员密码",
          offset: 70,
        });
        this.$refs["password"].focus();
        return false;
      }
      // if (this.form.captcha == "") {
      //   this.$notify.info({
      //     title: "系统提示",
      //     message: "请输入登录验证码",
      //     offset: 70,
      //   });
      //   this.$refs["captcha"].focus();
      //   return false;
      // }

      request_login(this.form)
        .then((res) => {
          const result = res.data;
          if (result.code == 200) {
            sessionStorage.setItem("token", result.data.token);
            this.$router.push("/home");
          } else {
            this.captcha = CONST_DMOMAIN_URL + "/captcha?random=" + Math.random();
            this.form.captcha = "";

            this.$notify.error({
              title: "系统提示",
              message: result.message,
              offset: 70,
            });
          }
        })
        .catch();
    },
  },
};
</script>
<style>
</style>